<template>
  <div class="SetMainUpdate">
    <header class="aui-bar aui-bar-nav" style="    border-bottom: 1px solid #ccc;">
      <a class="aui-pull-left aui-btn" style="font-size: 1.4rem !important" >
        <img @click="goBack()" src="../img/left.png" alt="">设置
      </a>
    </header>
    <section>
      <div style="width: 100%;height: 10rem;text-align: center">
        <img src="../img/xiaopugongz.png" style="display:block;width: 8rem;height: 8rem;margin:4rem auto"/>
      </div>
      <div style="padding: 0.2rem 0.5rem;border-bottom: 1px solid ghostwhite">
        <span style="font-size: large;font-weight: bold">马桶爆炸升级</span><span> | </span><span>测试版</span><span> | </span><span>58K</span>
      </div>
      <div style="padding: 0.2rem 0.5rem;">
        <span style="font-size: large;font-weight: bold">升级内容</span><span> <br /> </span><span>【更新智能设备】</span><span> <br /></span><span>【添加新模块】</span>
      </div>
      <div v-if="UpdateTypeStatus==0" class="shenjiContent">
        <div @click="UpdateSystem()" v-if="showBnt==true" class="lijibtn">立即升级</div>
        <div  v-if="showBnt==false"  style="height: 3rem">正在升级 {{textTT}} </div>
        <div v-if="showBnt==false" >升级中请勿退出，否则可能导致App功能损坏</div>
      </div>
      <div v-if="UpdateTypeStatus==1" class="shenjiContent">
        <div  class="lijiSuccess">已是最新版</div>
      </div>
    </section>
  </div>
</template>

<script>
import {mapMutations,mapState} from 'vuex'
import Loading from '../../common/Loading'
import {Register} from '../../../store/_CRC'

export default {
  name: 'SetMainUpdate',
  data () {
    return {
      showBnt:true,
      CanClickTimes:true,
      showAlert:true,
      textTT: '',
      totalLength:0,
    }
  },
  components: {
    Loading
  },
  computed:{
    ...mapState([
      'UpdateTypeStatus',
      'showAlertState',
      'yiFaLength',
      'UpdateFileData',
      'IsUpdateTypeValueC',
      'reciveState',
      'reciveLen',
      'reciveData',
      'connectEnd',
      'stateData',
      'startAddr',
      'IsConnect ',
      'stateEndSet'
    ])
  },
  watch: {
    UpdateTypeStatus(re){
      if(this.UpdateTypeStatus==1) {

      }
    },
    yiFaLength (val) {
      console.log('aaa')
      this.showLoading = true
      this.totalLength = this.UpdateFileData.length
      this.textTT = this.totalLength+'/'+ this.yiFaLength
    }
  },
  created(){

  },
  methods: {
    ...mapMutations([ 'WTGSTATE','TOTLECALLBACK','setRegisterBitValue','SetMainMUT','SetIsUpdateTypeValueC','AxiosTdev'
    ]),
    goBack(){
      this.$router.go(-1)
    },
    UpdateSystem () {
      this.showBnt = false
      clearInterval(window.setIntervalId)
      if(this.CanClickTimes == false) {
        return
      }
      this.CanClickTimes = false
      this.AxiosTdev()
      this.SetIsUpdateTypeValueC({type: 1})
      //查看90寄存器是否为1
      var wrTore = Register.getF03String(1, 90, 1)
      var deviceId = window.getStorageSync('deviceId');
      var serviceId = window.getStorageSync('serviceId');
      var characteristicId = window.getStorageSync('characteristicId');
      var data = window.writeTo16(wrTore);
      console.log('写入：1，90，1')
      window.hilink.writeBLECharacteristicValue(deviceId, serviceId, characteristicId, data, "writeCallback")
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .lijiSuccess{
    padding: 2rem 4rem;
    background-color: #00acc1;
  }
  .shenjiContent{
    text-align: center;
    width: 100%;
    position: absolute;
    bottom:2rem;
  }
  .lijibtn{
    text-align: center;
    width:80%;
    height:2rem !important;
    line-height: 2rem !important;
    margin:0 10% !important;
    color:#0075f0;
    font-size:0.8rem;
    border:1px solid #ccc;
    border-radius: 1.125rem!important;
    background: #f7f7f7;
  }
  .headerDiv{
    height: 2rem;
    width: 100%;
    /*background-color: #288af0;*/
  }
  body{
    background: #ffffff !important;
  }
  .aui-bar-nav {
    background: #ffffff;
  }
  .aui-bar-nav a {
    color: #000 !important;
  }
  .aui-content{
    margin:0 0.5rem;
  }
  .aui-content>ul>li{
    border-bottom: 1px solid #ccc;
    padding:0.5rem 0;
  }
  .detection{
    margin:0 1rem;
    height:2.25rem;
    line-height: 2.25rem;
    border-bottom:1px solid #ccc
  }
  .aui-list .aui-list-item-inner{
    padding:0.75rem 0.5rem 0.75rem 0;
  }
</style>
